<template>
  <div class="app-container app-container-next">
    <el-card class="box-card" shadow="false">
      <div slot="header" class="clearfix">
        <router-link :to="{name: 'staff-list'}">
          <el-button plain icon="el-icon-back" size="small" :round="true">
            返回
          </el-button>
        </router-link>
      </div>
      <el-row>
        <el-col :span="18">
          <el-form ref="staffForm" :model="staff" :rules="rules" label-width="120px">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="staff.email" placeholder="请输入邮箱" style="width: 400px"/>
            </el-form-item>
            <el-form-item label="姓名" prop="userName">
              <el-input v-model="staff.userName" placeholder="请输入姓名" style="width: 400px"/>
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
              <el-input v-model="staff.mobile" placeholder="请输入手机号" style="width: 400px"/>
            </el-form-item>
            <el-form-item label="菜单" prop="tableList">
              <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
              <div class="checkbox-table" v-for="(item, indexkey) in menuTree" :key="item.id">
                <template>
                  <el-checkbox class="check1" :indeterminate="item.indeterminate" v-model='menusIds' :label="item.id"
                               @change='handleCheck(1,indexkey)'>
                    {{ item.title }}
                  </el-checkbox>
                  <div style="margin-left: 20px">
                    <div v-for="list in item.children" class="line-check" :key="list.id"
                         style="display: inline-block; margin-right: 20px;margin-bottom: 10px;">
                      <el-checkbox class="check2" @change='handleCheck(2,indexkey)' v-model="menusIds" :label="list.id">
                        {{ list.title }}
                      </el-checkbox>
                    </div>
                  </div>
                </template>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSubmit('staffForm')" :loading="submitLoading">确认</el-button>
              <el-button @click="handleReset('staffForm')">取消</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import {getMenuTree, addStaff} from '@/api/site';

export default {
    name: 'staff-add',
    data () {
        return {
            checkAll: false,
            staff: {
                userName: '',
                email: '',
                mobile: ''
            },
            menuTree: [],
            rules: {
                email: [
                    {required: true, message: '请输入邮箱', trigger: 'blur'},
                    {type: 'email', message: '邮箱格式不正确', trigger: 'blur'}
                ],
                userName: [
                    {required: true, message: '请输入姓名', trigger: 'blur'}
                ],
                mobile: [
                    {type: 'string', pattern: /^1[3456789]\d{9}$/, message: '手机格式不正确', trigger: 'blur'}
                ]
            },
            submitLoading: false,
            menusIds: [],
            isIndeterminate: true,
            ids: []
        };
    },
    methods: {
        initData () {
            getMenuTree().then(res => {
                this.menuTree = res.data;
            });
        },
        handleSubmit (name) {
            this.$refs[name].validate(valid => {
                if (valid) {
                    this.staff.menuIdList = this.menusIds;
                    if (this.staff.menuIdList.length === 0) {
                        this.$message.error('请选择菜单!');
                        return;
                    }
                    this.submitLoading = true;
                    this.staff.siteId = this.siteId;
                    addStaff(this.staff).then(res => {
                        this.submitLoading = false;
                        this.$message.success(res);
                        this.$router.push({name: 'staff-list'});
                    }).catch(() => {
                        this.submitLoading = false;
                    });
                }
            });
        },
        handleReset (name) {
            this.$router.push({name: 'staff-list'});
        },
        // 处理选择事件
        handleCheck (type, a = 0) { // 多选框
            if (type === 2) { // 二级菜单点击
                let index = 0;
                this.menuTree[a]['indeterminate'] = true;
                this.menuTree[a].children.map(item => {
                    if (this.menusIds.indexOf(item.id) > -1) {
                        index += 1;
                    }
                });
                if (this.menuTree[a].children.every(res => this.menusIds.includes(res.id))) {
                    this.menuTree[a]['indeterminate'] = false;
                }
                if (index > 0) {
                    if (this.menusIds.indexOf(this.menuTree[a].id) < 0) {
                        this.menusIds.push(this.menuTree[a].id);
                    }
                } else {
                    this.menuTree[a]['indeterminate'] = false;
                    if (this.menusIds.indexOf(this.menuTree[a].id) >= 0) {
                        this.menusIds.splice(this.menusIds.indexOf(this.menuTree[a].id), 1);
                    }
                }
            } else {
                this.menuTree[a]['indeterminate'] = false;
                if (this.menusIds.indexOf(this.menuTree[a].id) > -1) {
                    this.menuTree[a].children.map(item => {
                        if (this.menusIds.findIndex((n) => n === item.id) < 0) {
                            this.menusIds.push(item.id);
                        }
                    });
                } else {
                    this.menuTree[a].children.map(item => {
                        if (this.menusIds.findIndex((n) => n === item.id) > -1) {
                            this.menusIds.splice(this.menusIds.findIndex((n) => n === item.id), 1);
                        }
                    });
                }
            }
        },
        allMenuId (data) {
            data.map(res => {
                if (res.children) {
                    this.allMenuId(res.children);
                }
                if (res.title !== '员工管理' && res.title !== '收款渠道') {
                    this.ids.push(res.id);
                }
            });
            return this.ids;
        },
        handleCheckAllChange (val) {
            this.ids = [];
            const data = this.allMenuId(this.menuTree);
            this.menusIds = val ? data : [];
        }

    },
    computed: {
        siteId () {
            return this.$store.state.user.siteId;
        }
    },
    mounted () {
        this.initData();
    }
};

</script>

<style scoped>

</style>
